import { observer } from 'mobx-react'
import React, { ComponentType, Suspense, useEffect, useState } from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'
import stores from './stores'
import { UserClass } from './stores/user'

interface RouteItem {
    name: string
    path: string
    exact?: boolean
    meta?: {
        loginHide?: boolean //登录之后隐藏
        needAuth?: boolean //需要登录之后显示
    }
    component: Record<string, () => Promise<{
        [key: string]: any;
    }>>
}
export let routeMap = (User: UserClass): RouteItem[] => {
    return [
        {
            name: '首页', path: '/', exact: true, component: import.meta.glob('./pages/home/index.tsx')
        }, {
            name: '商城', path: '/shop', component: import.meta.glob('./pages/shop/index.tsx')
        }, {
            name: '登录', path: '/signin', meta: { loginHide: true }, component: import.meta.glob('./pages/signin/index.tsx')
        }, {
            name: '注册', path: '/signup', meta: { loginHide: true }, component: import.meta.glob('./pages/signup/index.tsx')
        }, {
            name: '添加分类', path: '/create/category', meta: { needAuth: true }, component: import.meta.glob('./pages/user/addCategory/index.tsx')
        }, {
            name: '添加商品', path: '/create/product', meta: { needAuth: true }, component: import.meta.glob('./pages/user/addProduct/index.tsx')
        }, {
            name: '商品详情', path: '/product/:productId', component: import.meta.glob('./pages/product/index.tsx')
        }, {
            name: '购物车', path: '/cart', component: import.meta.glob('./pages/cart/index.tsx')
        }, {
            name: '支付完成', path: '/paysuccess', component: import.meta.glob('./pages/paysuccess/index.tsx')
        }, {
            name: 'dashboard', path: User.user.role === 1 ? '/admin/dashboard' : '/user/dashboard', meta: { needAuth: true }, component: import.meta.glob('./pages/user/dashboard/index.tsx')
        }, {
            name: '订单', path: User.user.role === 1 ? '/admin/orders' : '/user/orders', meta: { needAuth: true }, component: import.meta.glob('./pages/user/orders/index.tsx')
        },
    ]
}

// 显示的routeMap集合
export const routeShownArr = (): RouteItem[] => {
    return routeMap(stores.User).filter(r => {
        if (stores.User.token && r.meta?.loginHide) {
            return false
        } else if ((!stores.User.token) && r.meta?.needAuth) {
            return false
        } else {
            return true
        }
    }) as RouteItem[]
}
function getModules(modules: Record<
    string,
    () => Promise<{ [key: string]: any; }>
>
): Promise<{ default: ComponentType<any>; }> {
    let firstKey = Object.keys(modules)[0]
    let m = modules[firstKey]
    // console.log(modules, firstKey, m);

    return m() as Promise<{ default: ComponentType<any>; }>
}

function Routes(props: any) {
    let [_routeShownArr, set_RouteShownArr] = useState(routeShownArr())

    useEffect(() => {
        set_RouteShownArr(routeShownArr())
    }, [stores.User.token])

    return (
        <Suspense fallback={<div>Loading...</div>}>
            <Switch>
                {
                    _routeShownArr.map(route => {
                        return <Route path={route.path} exact={route.exact}
                            component={React.lazy(() => getModules(route.component))} key={route.path}></Route>
                    })
                }
                < Redirect from="*" to="/" />
            </Switch>
        </Suspense>
    )
}

export default observer(Routes)
